﻿@{
    ViewBag.Title = "History";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@Styles.Render("~/Content/pagedlist")
<div id="divMsgIndex"></div>
<div class="form-group">
    Filter By User :
    <div class="col-lg-3">
        <select id="DDLUser" name="parent">
            <option value="0">----Select User---- </option>
        </select>
    </div>
</div>
<div class="widget">
    <div class="widget-head">
        <div class="pull-left">History</div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <div id="NoRecord"></div>
        <table class="table table-striped table-bordered table-hover" id="History">
            <thead>
                <tr>
                    <th>UserID</th>
                    <th>UserName</th>
                    <th>Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: pageData()" style="margin-top: 50px">
                <tr>
                    <td data-bind="text: UserID"></td>
                    <td data-bind="text: UserName"></td>
                    <td data-bind="text: Action"></td>
                    <td data-bind="text: moment(DateAdded()).format('DD/MM/YYYY')"></td>
                    <td>
                        <a data-bind="attr: { href: '/Admin/History/GetHistoryDetail?HistoryID=' + HistoryID()}" class="getdetail">Show Description</a>
                    </td>
                    <td>
                        <a data-bind="attr: { href: '/Admin/History/Delete?HistoryID=' + HistoryID()}" class="fa fa-times" title="Delete Record"></a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="widget-foot" id="paging">
             <ul class="pagination pagination-sm pull-right">
                 <li><a id="FirstPageButton" href="javascript:void(0)">First</a></li>
                 <li><a id="prevPageButton" href="javascript:void(0)">Prev</a></li>
                <li data-bind="foreach: ko.utils.range(1, pager())"><a data-bind="attr: {text :  $data }, text : $data" href="javascript:void(0)"  class="pageNumber"></a></li>
                <li><a  id="nextPageButton"  href="javascript:void(0)">Next</a></li>
                 <li><a id="LastPageButton" href="javascript:void(0)">Last</a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div id="modalDiv" class="modal fade" role="dialog" aria-labelledby="myModalLabel">
    <div id="modalContent" class="modal-dialog"></div>
</div>
<div id="modalDivDescrptn" class="modal fade" role="dialog" aria-labelledby="myModalLabel" style="width: 400px;">
    <div id="DesContent" class="modal-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
            <h3 id="myModalLabel">History Description</h3>
        </div>
        <div>
            <div class="modal-body" id="divDescription">
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true"><i class="icon-thumbs-up icon-white"></i>OK</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function HideTable() {
        $("#History").hide();
        $('#paging').hide();
        $('#NoRecord').html('<img src="../img/Fillingbrokenring.gif"> loading...');
        var table = document.getElementById("History");
        var rowCount = table.rows.length;
        if (rowCount < 2) {
            $('#NoRecord').show();
            showMsg('NoRecord', 'No Record available', 'info');
        }
    }
    function ShowTable() {
        var table = document.getElementById("History");
        var rowCount = table.rows.length;
        $('#NoRecord').hide();
        $("#History").show();
        $('#paging').show();
    }
    $(document).ready(function () {
        HideTable();
        $('#h2Title').html("<i class='fa fa-suitcase'></i> History");
        $('#aTitle').html("History");
        $('#liHistory').addClass("open");
        $.getJSON("/admin/history/LoadUser", null,
               function (classesData) {
                   var select = $("#DDLUser");
                   select.empty();
                   select.append($('<option/>', {
                       value: 0,
                       text: "----Select User----"
                   }));
                   $.each(classesData, function (index, itemData) {
                       select.append($('<option/>', {
                           value: itemData.Value,
                           text: itemData.Text
                       }));
                   });
               });
    });

    $(document).delegate(".icon-trash", "click", (function (e) {
        e.preventDefault();
        $("#modalContent").load(this.href, function () {
            $('#modalDiv').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');
        });
        return false;
    }));

    $(document).delegate(".getdetail", "click", (function (e) {
        e.preventDefault();
        $.ajax({
            url: this.href,
            type: "POST",
            success: function (result) {
                var description = result;
                var res = new Array();
                res = description.split(",");
                var mydiv = $("#divDescription");
                mydiv.innerHTML = '';
                var ulTag = document.createElement('ul');
                mydiv.appendChild(ulTag);

                for (var i = 0; i < Number(res.length) ; i++) {
                    var spanTag = document.createElement('span');
                    var liTag = document.createElement('li');
                    spanTag.innerHTML = res[i];
                    ulTag.appendChild(liTag);
                    liTag.appendChild(spanTag);
                }
                $("#modalDivDescrptn").modal('show');
            },
            error: function (data) {
            }
        });
        return false;
    }));

    $("#DDLUser").change(function () {
        vm.currentPage(1);
        loadPage(vm.currentPage(), vm.recordCount());
    });

    var loadPage = function (pageNumber, pageSize, searchString) {
        $.ajax({
            url: "/Admin/History?pageNumber=" + pageNumber + "&pageSize=" + pageSize + "&searchString=" + $("#DDLUser").val() + "&pgindex=10&columnFilter=" + '',
            type: "POST",
            success: function (data) {
                if (vm == null) {
                    vm = new viewModel(data);
                    if ((vm.maxPageIndex() + 1) >= 5) {
                        $("#nextPageButton").css({ "display": "initial" });
                    }
                    ko.applyBindings(vm);
                    if (data.Data.length == 0) {
                        HideTable();
                    }
                    else {
                        ShowTable();
                    }
                    return data.Data.length;
                }
                else {
                    if (data.RecordCount != 0) {
                        vm.maxPageIndex(Math.ceil(data.RecordCount / $("#rowsPerPage").val()) - 1);
                        var Pager = (vm.maxPageIndex() + 1 >= 10) ? 10 : vm.maxPageIndex() + 1;
                        vm.pager(Pager);
                        vm.pageData(ko.observableArray());
                        vm.pageData(ko.mapping.fromJS(data.Data));
                        if ((vm.maxPageIndex() + 1) <= 5) {
                            $("#prevPageButton").css({ "display": "none" });
                            $("#nextPageButton").css({ "display": "none" });
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isLastPage()) {
                            $("#nextPageButton").css({ "display": "intial" });
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isFirstPage()) {
                            $("#prevPageButton").css({ "display": "intial" });
                        }
                        $('#alert_warning').html('');
                    }
                    else {
                        if (Number($("#DDLUser").val()) != 0) {
                            $('#alert_warning').html('<div class="alert alert-info"><a hreaf="#" class="close" data-dismiss="alert"><i class="icon-remove" style="margin-top:5px;"></i></a><strong>' + "Warning! " + '</strong><span> No Record Found </span></div>');
                        }
                        vm.pageData(ko.observableArray());
                        vm.pageData(ko.mapping.fromJS(data.Data));
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                }
            }
        });
    }
</script>
@Scripts.Render("~/bundles/pagedlist")